<script setup>
import {ref} from 'vue'
// 控制弹框显示状态
const showModal = ref(false)

// 显示弹框的函数
function showBatchModal() {
  showModal.value = true // 设置为true，显示弹框
}

// 关闭弹框的函数
function closeBatchModal() {
  showModal.value = false// 设置为false，隐藏弹框
}
</script>

<template>
  <view class="d1">
    <view class="tip">当前１个返校批次进行中</view>
    <view>
      <view class="container">
        <text class="fxpc">
          <text>【2025年秋季学期返校申请】</text>
          同学你好，你返校报到时间为8月30日、31日。
          从即日起，低风险和无风险地区老生如有需要，可以申请提前返校，返校申请获批后请根据行程安排填写返校交通信息。
          进校后请及时进行网上“到校注册”。申请提前返校同学，返川后实施3天2检；扫码、测温、凭48小时内核酸检测报告进校；
          弹窗人员核酸结果出来前如果要到校内，全程佩戴口罩，相对固定活动范围，提前返校学生需严格遵守成都市疫情防控要求。
          7天内有中高风险区旅居史的学生暂不返校。
          <br>
          <br>
        </text>
        <view class="ts">
          申请时间：2025-08-10 18:05:11 <br>
          结束时间：2025-08-29 00:00:00 <br>
          批次涉及人数：12000 <br>
          批次状态: <text id="d2">进行中</text>
        </view>
      </view>
    </view>
    <view id="xts" @click="showBatchModal">
      当前暂无其他开放返校批次，点击查看详情
    </view>

    <!-- 弹框 -->
    <view v-if="showModal" class="modal-overlay" @click="closeBatchModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">返校批次信息</text>
          <text class="modal-close" @click="closeBatchModal">×</text>
        </view>
        <view class="modal-body">
          <text>当前暂无其他开放返校批次，请耐心等待</text>
        </view>
        <view class="modal-footer">
          <button class="modal-button" @click="closeBatchModal">确定</button>
        </view>
      </view>
    </view>

  </view>
</template>

<style scoped>
.d1 {
  background-color: #F0F3FA;
  width: 100%;
  height: 100%;
}

.container {
  display: block; /*块级元素*/
  border: 1px solid black;
  padding: 10px; /* 内边距 */
  box-sizing: border-box; /* 盒模型 */
  margin: 30px 20px; /* 左右间距20px */
  width: calc(100% - 40px); /* 考虑左右margin */
  height: auto;
  background: white;

}

.fxpc {
  font-size: 16px;
  color: #333;
}

.ts {
  font-size: 12px;
  color: orange;
}

.tip {
  font-size: 14px;
  margin: 0 10px;
  text-align: center;
  background: lightgreen;
}
#d2 {
  font-size: 12px;
  color: lawngreen;
}
#xts{
  font-size: 14px;
  color: #3F536E;
  text-align: center;
  position: relative;
  margin-top: 300px
}
/* 弹框遮罩层样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;/* 设置层级，确保在最上层 */
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 80%;
  max-width: 300px;
  padding: 0;
}

.modal-header {
  display: flex;
  justify-content: space-between;/* 两端对齐，标题和关闭按钮分别在左右两侧 */
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.modal-body {
  padding: 20px 15px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.modal-footer {
  padding: 15px;
  text-align: center;
  border-top: 1px solid #eee;
}

.modal-button {
  background-color: #409EFF;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
}
</style>